
import React, { useState, useEffect } from 'react';
import { useNavigate } from 'react-router-dom';
import axios from 'axios';
import './My_list.css'
function Dong_Tai() {
    const [dongList, setDongList] = useState([])
    const [gdId, setGdId] = useState('')
    const [dongCate, setDongCate] = useState([])
    useEffect(() => {
        getDong()
        getDongCate()
    }, [])
    const getDong = async () => {
        const res = await axios.get(`http://localhost:3000/guandong_List?gdId=${gdId}`)
        console.log(res);
        setDongList(res.data.data)
    }
    const getDongCate = async () => {
        const res = await axios.get('http://localhost:3000/guandong_Cate')
        console.log(res);
        setDongCate(res.data.data)
    }
    const navigate = useNavigate();
    return (
        <div className='dong_tai'>
            <div className="dong_tai_beijing_img">
                <div className="dong_tai_beijing_top">
                    <div className="dong_tai_beijing_top_left">
                        <p>9:41</p>
                    </div>
                    <div className="dong_tai_beijing_top_right">
                        <h3 className='dingdan_detail_right_h3'>
                            <svg t="1739181732005" class="icon" viewBox="0 0 1294 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="4224" width="20" height="20"><path d="M0 727.578947l188.631579 0 0 296.421053-188.631579 0 0-296.421053Z" p-id="4225" fill="#2c2c2c"></path><path d="M269.473684 565.894737l188.631579 0 0 458.105263-188.631579 0 0-458.105263Z" p-id="4226" fill="#2c2c2c"></path><path d="M565.894737 377.263158l161.684211 0 0 646.736842-161.684211 0 0-646.736842Z" p-id="4227" fill="#2c2c2c"></path><path d="M835.368421 188.631579l188.631579 0 0 835.368421-188.631579 0 0-835.368421Z" p-id="4228" fill="#2c2c2c"></path><path d="M1104.842105 0l188.631579 0 0 1024-188.631579 0 0-1024Z" p-id="4229" fill="#2c2c2c"></path></svg>
                        </h3>
                        <h3 className='dingdan_detail_right_h31'>
                            <svg t="1739181875778" class="icon" viewBox="0 0 1346 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8311" width="20" height="20"><path d="M614.762225 324.416035a578.94361 578.94361 0 0 0-397.653943 238.117618 89.918541 89.918541 0 1 0 154.434563 92.115133 407.432318 407.432318 0 0 1 262.421842-151.458536c118.438803-12.683545 237.054751 43.400399 352.482099 166.834678a89.95397 89.95397 0 0 0 131.370351-122.867416c-194.575504-207.825911-380.966932-235.81474-503.054912-222.741477z m60.866846 354.288972a172.645016 172.645016 0 1 0 172.574158 172.574159 172.645016 172.645016 0 0 0-172.645016-172.715874zM630.846944 0.985632C291.615253 16.609776 64.232591 258.695431 22.107632 307.055875a89.918541 89.918541 0 0 0 135.621819 118.049086c20.655047-23.701932 209.668214-232.023848 481.407855-244.459391 185.222275-8.502935 372.003421 75.746982 555.135391 250.553161a89.918541 89.918541 0 0 0 124.001141-130.130339C1098.366672 90.939602 867.015973-9.997326 630.846944 0.985632z" p-id="8312" fill="#2c2c2c"></path></svg>
                        </h3>
                        <h3 className='dingdan_detail_right_h32'>
                            <svg t="1739182052804" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9429" width="20" height="20"><path d="M984.2 434.8c-5-2.9-8.2-8.2-8.2-13.9v-99.3c0-53.6-43.9-97.5-97.5-97.5h-781C43.9 224 0 267.9 0 321.5v380.9C0 756.1 43.9 800 97.5 800h780.9c53.6 0 97.5-43.9 97.5-97.5v-99.3c0-5.8 3.2-11 8.2-13.9 23.8-13.9 39.8-39.7 39.8-69.2v-16c0.1-29.6-15.9-55.5-39.7-69.3zM912 702.5c0 12-6.2 19.9-9.9 23.6-3.7 3.7-11.7 9.9-23.6 9.9h-781c-11.9 0-19.9-6.2-23.6-9.9-3.7-3.7-9.9-11.7-9.9-23.6v-381c0-11.9 6.2-19.9 9.9-23.6 3.7-3.7 11.7-9.9 23.6-9.9h780.9c11.9 0 19.9 6.2 23.6 9.9 3.7 3.7 9.9 11.7 9.9 23.6v381z" p-id="9430" fill="#2c2c2c"></path><path d="M736 344v336c0 8.8-7.2 16-16 16H112c-8.8 0-16-7.2-16-16V344c0-8.8 7.2-16 16-16h608c8.8 0 16 7.2 16 16z" p-id="9431" fill="#2c2c2c"></path></svg>
                        </h3>
                    </div>
                </div>
                <div className="dong_tai_center">
                    <p onClick={() => {
                        navigate('/ding_detail')
                    }}>
                        <svg t="1739414007692" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="7262" width="25" height="25"><path d="M317.064455 551.959229c-11.256121 0-22.61457-4.297792-31.210153-12.893375-17.191166-17.191166-17.191166-45.126811 0-62.317978L682.78605 79.816129c17.191166-17.191166 45.126811-17.191166 62.317977 0 17.191166 17.191166 17.191166 45.126811 0 62.317977L348.172279 539.065854c-8.595583 8.595583-19.851704 12.893375-31.107824 12.893375z" fill="#272636" p-id="7263"></path><path d="M713.893874 948.890976c-11.256121 0-22.61457-4.297792-31.210153-12.893374L285.854302 539.065854c-17.191166-17.191166-17.191166-45.126811 0-62.317978 17.191166-17.191166 45.126811-17.191166 62.317977 0L745.104027 873.679624c17.191166 17.191166 17.191166 45.126811 0 62.317978-8.595583 8.595583-19.851704 12.893375-31.210153 12.893374z" fill="#272636" p-id="7264"></path></svg>
                    </p>
                </div>
                <div className="dong_tai_img_shouo">
                    <div className="dong_tai_img_shouo_left">

                    </div>
                    <div className="dong_tai_img_shouo_wenzi">
                        <p>
                            守护者
                        </p>
                        <p></p>
                    </div>

                </div>
                <div className="dong_tai_beijing_img_last">
                    <div className="dong_tai_beijing_img_last_left">
                        {
                            dongCate.map((item, index) => {
                                return (
                                    <div onClick={() => {
                                        setGdId(item._id)
                                        getDong()
                                    }} style={{
                                        borderBottom: gdId == item._id ? '3px solid #b8741a' : 'none',
                                        fontWeight: gdId == item._id ? '700' : '',

                                    }} key={index} className='dong_tai_beijing_img_last_left_box'>

                                        <p>{item.name}</p>
                                    </div>
                                )
                            })
                        }
                    </div>
                    <div className="dong_tai_beijing_img_last_right">
                        <svg t="1739416961160" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="8277" width="50" height="50"><path d="M593.1 313.4c-70.1-70.1-179.9-75.9-256.8-17.8 51.9 40.3 99.6 85.5 127.6 147.1 25.5 68.9 28.4 137.8 15.2 204.1 41.7-5.3 82-23.7 114-55.7 76.6-76.7 76.6-201 0-277.7z" fill="#FFDE55" p-id="8278"></path><path d="M777.9 758.3L610.5 590.8c34-38.2 52.6-87 52.6-138.5 0-55.8-21.7-108.2-61.2-147.6-81.4-81.4-213.9-81.4-295.3 0-39.4 39.4-61.2 91.9-61.2 147.6s21.7 108.2 61.2 147.6c40.7 40.7 94.2 61.1 147.6 61.1 49.6 0 99.1-17.5 138.5-52.5L760.2 776c2.4 2.4 5.6 3.7 8.8 3.7 3.2 0 6.4-1.2 8.8-3.7 5-4.9 5-12.9 0.1-17.7zM324.3 582.2c-34.7-34.7-53.8-80.9-53.8-130s19.1-95.3 53.8-130c35.8-35.8 82.9-53.7 130-53.7s94.1 17.9 130 53.7c34.7 34.7 53.8 80.9 53.8 130s-19.1 95.3-53.8 130c-71.8 71.7-188.4 71.7-260 0z" fill="" p-id="8279"></path></svg>
                    </div>
                </div>
            </div>
            <div className="dong_xuan">
                {
                    dongList.map((item, index) => {
                        return (
                            <div key={index} className='dong_tai_dong_list_box'>
                                <div className="dong_tai_dong_list_box_top">
                                    <p>
                                        <img src={item.img} alt="图片" width={50} height={50} />
                                    </p>
                                    <p>
                                        <span>
                                            {item.name}
                                        </span>
                                        <br></br>
                                        <span style={{
                                            color: '#878787'
                                        }}>
                                            {item.time}
                                        </span>
                                    </p>
                                </div>
                                <div className="dong_tai_dong_list_box_wenzi">
                                    <p>
                                        {item.content}
                                    </p>
                                </div>
                                <div className="dong_tai_dong_list_box_ximg">
                                    <p>
                                        <img src={item.ximg} alt="图片" width={120} height={120} />
                                    </p>
                                    <p>
                                        <img src={item.ximg} alt="图片" width={120} height={120} />
                                    </p>
                                    <p>
                                        <img src={item.ximg} alt="图片" width={120} height={120} />
                                    </p>
                                </div>
                                <div className="dong_tai_dong_list_box_shoucang">
                                    <div className="dong_tai_dong_list_box_shoucang_left">
                                        <p>
                                            <span className='dong_tai_dong_list_box_shoucang_left_sag'>
                                                <svg t="1739418451485" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9339" width="20" height="20"><path d="M512 1024C229.229714 1024 0 794.733714 0 511.963429 0 229.193143 229.229714-0.036571 512-0.036571 794.770286-0.036571 1024 229.193143 1024 511.963429 1024 794.733714 794.770286 1024 512 1024ZM512 73.142857C269.641143 73.142857 73.142857 269.641143 73.142857 512 73.142857 754.358857 269.641143 950.857143 512 950.857143 754.358857 950.857143 950.857143 754.358857 950.857143 512 950.857143 269.641143 754.358857 73.142857 512 73.142857ZM676.571429 548.571429 493.714286 548.571429C483.620571 548.571429 475.428571 540.379429 475.428571 530.285714L475.428571 493.714286 475.428571 493.677714 475.428571 201.142857C475.428571 191.049143 483.620571 182.857143 493.714286 182.857143L530.285714 182.857143C540.379429 182.857143 548.571429 191.049143 548.571429 201.142857L548.571429 475.392 676.571429 475.392C686.665143 475.392 694.857143 483.584 694.857143 493.677714L694.857143 530.285714C694.857143 540.379429 686.665143 548.571429 676.571429 548.571429Z" p-id="9340"></path></svg>
                                            </span>
                                            <span className='dong_tai_dong_list_box_shoucang_left_wne' style={{
                                                marginLeft: '10px'
                                            }}>
                                                23
                                            </span>
                                        </p>
                                    </div>
                                    <div className="dong_tai_dong_list_box_shoucang_right">
                                        <p className='dong_tai_dong_list_box_shoucang_right_p1'>
                                            <span>
                                                <svg t="1739418899711" class="icon" viewBox="0 0 1059 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10332" width="25" height="25"><path d="M253.488042 1024c-16.9 0-33.2875-5.1125-47.6125-15.3625-26.625-18.425-39.425-49.6625-34.3125-81.925l40.9625-251.9c1.5375-10.2375-1.5375-20.475-8.7-27.65L28.213042 466.4375c-22.0125-22.525-29.1875-55.3-19.45-84.9875 9.725-29.7 35.325-51.2 66.05-55.8125l237.575-36.35c10.75-1.5375 19.4625-8.1875 24.0625-17.925L441.388042 48.125c13.825-29.7 42.5-48.125 75.2625-48.125s61.4375 18.4375 75.2625 48.125l104.45 223.2375c4.6125 9.725 13.825 16.375 24.0625 17.925L958.000542 325.625a82.355 82.355 0 0 1 66.05 55.8125c10.2375 29.7 2.5625 62.4625-19.45 84.9875l-175.625 180.7375c-7.1625 7.175-10.2375 17.925-8.7 27.65l40.9625 251.9c5.125 31.75-8.1875 63.4875-34.3 81.925-26.1125 18.4375-59.9 20.4875-88.0625 4.6125l-206.85-114.6875c-9.725-5.1125-20.9875-5.1125-30.7125 0l-207.3625 115.2c-12.8125 6.65-26.6375 10.2375-40.4625 10.2375zM516.650542 51.2c-12.8 0-23.55 7.1625-29.1875 18.4375L383.525542 292.875c-11.775 25.0875-35.325 43.0125-62.975 47.1l-237.575 36.35c-12.2875 2.05-21.5 9.7375-25.6 21.5-4.1 11.775-1.025 24.0625 7.675 32.775L240.688042 611.325c18.4375 18.95 26.625 45.5625 22.525 71.675L222.250542 934.9125c-2.05 12.8 3.075 24.575 13.3125 31.7375 10.2375 7.175 23.0375 7.6875 33.7875 1.5375l207.3625-115.2c25.0875-13.825 55.3-13.825 80.3875 0l207.3625 115.2c10.75 6.1375 23.55 5.625 33.8-1.5375 10.2375-7.1625 15.3625-18.95 13.3125-31.7375L770.625542 683.0125c-4.1-26.1125 4.1-52.7375 22.525-71.675l175.625-180.7375c8.7-8.7 11.2625-20.9875 7.675-32.775-4.0875-11.775-13.3125-19.9625-25.6-21.5l-237.5625-36.35c-27.65-4.0875-51.2-22.0125-62.975-47.1L545.838042 69.6375c-5.625-11.2625-16.375-18.4375-29.1875-18.4375z m0 0" p-id="10333"></path></svg>
                                            </span>
                                            <span style={{

                                                marginLeft: '6px',
                                            }}>34</span>
                                        </p>
                                        <p className='dong_tai_dong_list_box_shoucang_right_p2'>
                                            <span>
                                                <svg t="1739424563005" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="11329" width="25" height="25"><path d="M171.712 571.648l0.352 0.32 287.904 252.8a64 64 0 0 0 82.912 1.344l296.832-244.544a215.584 215.584 0 1 0-301.824-300.576L512 316.672l-25.888-35.616a215.584 215.584 0 1 0-314.4 290.624zM32 407.584a279.584 279.584 0 0 1 480-194.944 279.584 279.584 0 0 1 480 194.944 278.144 278.144 0 0 1-113.024 224.512l-295.36 243.392a128 128 0 0 1-165.888-2.592L129.984 620.16A278.976 278.976 0 0 1 32 407.584z" fill="#000000" p-id="11330"></path></svg>
                                            </span>
                                            <span>34</span>
                                        </p>
                                        <p className='dong_tai_dong_list_box_shoucang_right_p3'>
                                            <span>
                                                <svg t="1739424768859" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="13839" width="25" height="25"><path d="M157.568 751.296c-11.008-18.688-18.218667-31.221333-21.802667-37.909333A424.885333 424.885333 0 0 1 85.333333 512C85.333333 276.362667 276.362667 85.333333 512 85.333333s426.666667 191.029333 426.666667 426.666667-191.029333 426.666667-426.666667 426.666667a424.778667 424.778667 0 0 1-219.125333-60.501334 2786.56 2786.56 0 0 0-20.053334-11.765333l-104.405333 28.48c-23.893333 6.506667-45.802667-15.413333-39.285333-39.296l28.437333-104.288z m65.301333 3.786667l-17.258666 63.306666 63.306666-17.258666a32 32 0 0 1 24.522667 3.210666 4515.84 4515.84 0 0 1 32.352 18.944A360.789333 360.789333 0 0 0 512 874.666667c200.298667 0 362.666667-162.368 362.666667-362.666667S712.298667 149.333333 512 149.333333 149.333333 311.701333 149.333333 512c0 60.586667 14.848 118.954667 42.826667 171.136 3.712 6.912 12.928 22.826667 27.370667 47.232a32 32 0 0 1 3.338666 24.714667z m145.994667-70.773334a32 32 0 1 1 40.917333-49.205333A159.189333 159.189333 0 0 0 512 672c37.888 0 73.674667-13.173333 102.186667-36.885333a32 32 0 0 1 40.917333 49.216A223.178667 223.178667 0 0 1 512 736a223.178667 223.178667 0 0 1-143.136-51.690667z" fill="#8a8a8a" p-id="13840"></path></svg>
                                            </span>
                                            <span>34</span>
                                        </p>
                                    </div>
                                </div>
                            </div>
                        )
                    })
                }

            </div>
            <div className="dong_xuan_caogao">
                <p onClick={() =>{
                    navigate('/cao_gao')
                }}>
                    <svg t="1739425475250" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="14954" width="50" height="50"><path d="M706.048 204.8c16.5888 0 32.512 5.7856 44.544 16.128a56.32 56.32 0 0 1 20.0192 39.424l0.1024 2.9696v314.7776l-16.1792-7.5776c8.4992 0 16.896 1.536 24.7296 4.4544 7.8336 2.9184 15.0016 7.2192 20.992 12.6976 5.9904 5.4272 10.752 11.8784 14.0288 18.944 3.2256 7.1168 4.9152 14.7456 4.9152 22.4256v131.6352c0 15.5136-6.8096 30.4128-18.944 41.3696a68.3008 68.3008 0 0 1-45.7216 17.152H269.4656c-17.152 0-33.5872-6.144-45.7216-17.152a55.808 55.808 0 0 1-18.944-41.3696v-131.6352c0-7.68 1.6896-15.3088 4.9152-22.4256 3.2768-7.0656 8.0384-13.5168 14.0288-18.944a65.536 65.536 0 0 1 20.992-12.6976c7.8336-2.9696 16.2304-4.4544 24.7296-4.4544l-16.1792 4.4544V263.3216c0-15.0016 6.4-29.44 17.8176-40.3456 11.4688-10.8544 27.0848-17.3568 43.6224-18.1248L318.0032 204.8h388.0448z m-325.5296 424.2432H269.4656v131.6352h485.0688v-131.6352h-111.0528l-29.696 44.6976c-5.6832 8.704-13.824 15.872-23.552 20.8384-9.728 4.9664-20.6848 7.5776-31.8464 7.5776H465.6128c-11.1616 0-22.1184-2.56-31.8464-7.5776a62.1568 62.1568 0 0 1-23.552-20.8384l-29.696-44.6976z m325.4784-365.7216H318.0544v307.2h62.5152c11.1616 0 22.1696 2.6112 31.8464 7.5776 9.728 4.9664 17.8688 12.1344 23.6032 20.8384l29.696 44.6976h92.672l29.696-44.6976c5.7344-8.704 13.824-15.872 23.552-20.8384 9.728-4.9664 20.736-7.5776 31.8976-7.5776h62.5664v-307.2z m-129.3312 190.1568a17.664 17.664 0 0 1 11.4176 4.3008c1.536 1.3312 2.7136 2.9696 3.5328 4.7616a13.4144 13.4144 0 0 1 1.2288 5.5808v29.2352a13.4144 13.4144 0 0 1-1.2288 5.632 14.6432 14.6432 0 0 1-3.5328 4.7104 17.664 17.664 0 0 1-11.4176 4.3008H447.3344a17.664 17.664 0 0 1-11.4176-4.3008 14.6432 14.6432 0 0 1-3.5328-4.7104 13.4144 13.4144 0 0 1-1.2288-5.632v-29.2352c0-1.9456 0.4096-3.84 1.2288-5.632a14.592 14.592 0 0 1 3.5328-4.7104 17.664 17.664 0 0 1 11.4176-4.3008h129.3312z m32.3584-117.0432c4.3008 0 8.3968 1.536 11.4176 4.3008 3.072 2.7648 4.7104 6.4512 4.7104 10.3424v29.2864a13.9264 13.9264 0 0 1-4.7104 10.3424 17.0496 17.0496 0 0 1-11.4176 4.2496h-194.048a17.0496 17.0496 0 0 1-11.4176-4.2496 13.9776 13.9776 0 0 1-4.7616-10.3424v-29.2864c0-3.8912 1.7408-7.5776 4.7616-10.3424a17.0496 17.0496 0 0 1 11.4176-4.3008h194.048z" fill="#ffffff" p-id="14955"></path></svg>
                </p>
            </div>
            <div className="dong_xuan_caogao1">
                <p>
                <svg t="1739425636563" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="16001" width="60" height="60"><path d="M514.048 62.464q93.184 0 175.616 35.328t143.872 96.768 96.768 143.872 35.328 175.616q0 94.208-35.328 176.128t-96.768 143.36-143.872 96.768-175.616 35.328q-94.208 0-176.64-35.328t-143.872-96.768-96.768-143.36-35.328-176.128q0-93.184 35.328-175.616t96.768-143.872 143.872-96.768 176.64-35.328zM772.096 576.512q26.624 0 45.056-18.944t18.432-45.568-18.432-45.056-45.056-18.432l-192.512 0 0-192.512q0-26.624-18.944-45.568t-45.568-18.944-45.056 18.944-18.432 45.568l0 192.512-192.512 0q-26.624 0-45.056 18.432t-18.432 45.056 18.432 45.568 45.056 18.944l192.512 0 0 191.488q0 26.624 18.432 45.568t45.056 18.944 45.568-18.944 18.944-45.568l0-191.488 192.512 0z" p-id="16002" fill="#f9deaa"></path></svg>
                </p>
            </div>
        </div>
    )
}

export default Dong_Tai;